<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 <!--
    1.插槽的基本使用：<slot></slot>
      - 为了让我们封装的组件更加具有扩展性
      - 让使用者可以决定组件内部的一些内容到底展示什么
    2.插槽的默认值：<slot>button</slot>
    3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
 -->
<div id="app">
  <cpn></cpn>
  <cpn>
    <span>阿絮</span>
    <div>老温</div>
  </cpn>
  <cpn><i>我这不就来见你了</i></cpn>
  <cpn></cpn>
  <cpn></cpn>
  
</div>

 <template id="cpn">
   <div>
     <h2>世上本无事</h2>
     <p>庸人自扰之</p>
    <!--放一个slot，预留一个位置
        插槽里放了一个默认值：button，如果在vue实例中，没有传入内容，显示默认值，如果有传入，显示传入的内容-->
     <slot><button>按钮</button></slot>
   </div>
 </template>
 
<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components:{
      cpn:{
        template:'#cpn',
      }
    }
  })

</script>
</body>
</html>